
// 获取tbody容器
const tbody = document.querySelector('tbody');
// 1、 渲染学生成绩信息
async function scoreList() {
    const result = await axios({
        url: "/score/list"
    })
    console.log(result);
    // 学生信息路径：data.data
    const data = result.data.data
    let html = ""
    // 用遍历对象来遍历
    for (const key in data) {
        html += `
       <tr>
        <th scope="row">${key}</th>
        <td>${data[key].name}</td>
        <td class="score" data-id="${key}" data-batch="${1}" >${data[key].score[0]}</td>
        <td class="score" data-id="${key}" data-batch="${2}" >${data[key].score[1]}</td>
        <td class="score" data-id="${key}" data-batch="${3}" >${data[key].score[2]}</td>
        <td class="score" data-id="${key}" data-batch="${4}" >${data[key].score[3]}</td>
        <td class="score" data-id="${key}" data-batch="${5}" >${data[key].score[4]}</td>
      </tr>
       
       `
    }
    // 设置到对应标签
    tbody.innerHTML = html
}
scoreList()
/* 
渲染小结：
用一个函数来向后台请求数据，有了数据因为这个数据是一个对象，用forin来循环得到每一个数据，注意forin中的key是一个变量得用括号起来使用
第几次得成绩也可以用下标来获取
*/
// 2、绑定一个双击事件,事件委托
tbody.addEventListener('dblclick', function (ev) {
    // console.log(tbody);
    // 3、判断只能双击成绩
    if (ev.target.classList.contains("score")) {
        // 创造一个input节点标签
        const input = document.createElement('input')
        // input文本属性
        input.type = 'text'
        // 点击时候插入input
        ev.target.append(input)
        // 点击得时候显示
        input.style.display = "block";
        // 获取当前得输入框得内容
        input.value = ev.target.innerText
        // 获得焦点
        input.focus()
        //4、 回车键盘事件和失去焦点事件共用得函数,解决了两个冲突提示框冲突的问题
        async function discharge() {
            const { id, batch } = ev.target.dataset
            // console.log(id, batch);
            // 请后台请求修改
            const result = await axios({
                url: "/score/entry",
                method: "POST",
                data: {
                    stu_id: id, batch, score: input.value
                }

            })
            console.log(result);
            if (result.data.code === 0) {
                toastr.success("修改成功")
            }
            // 刷新页面
            scoreList()

        }
        // 5、给表单绑定一个键盘事件
        input.addEventListener('keyup', function (e) {
            // console.log(ev);
            if (e.key === "Enter") {
                discharge()
                input.removeEventListener("blur", discharge)
            }

        })
        //  6、失去焦点修改
        input.addEventListener('blur', discharge)

    }

})
/* 
这个页面功能的总结:
1.渲染功能:
先向后台渲染得到数据后,考虑到这是一丢的对象不能使用map用forin循环对象来做,挨个填写对应的数据
2.点击就能修改和回车就能修改
2.1,用事件委托来做一个动态的生成input

*/
